<template>
    <el-col style="height:100%">
        <el-row>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>查询信息</span>
                    </div>
                </template>
                <el-row :gutter="2">
                    <span style="margin:auto 0">序列号</span>
                    <el-col :span="3"><el-input v-model="serialnum_item.serialnum" placeholder="请输入"></el-input></el-col>
                    <span style="margin:auto 0">设备唯一标识</span>
                    <el-col :span="3"><el-input v-model="serialnum_item.deviceid" placeholder="请输入"></el-input></el-col>
                    <span style="margin:auto 0">时间</span>
                    <el-col :span="2">
                        <el-date-picker
                            v-model="serialnum_item.range"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            range-separator="至"
                        />
                    </el-col>
                    <el-col :span='2' :offset='7' justify="end">
                        <el-button type="success">查询</el-button>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
        <el-row>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>序列号信息</span>
                    </div>
                </template>
                    <el-row>
                        <el-button type="success" @click="addSerialNumDialogVisible=true">添加</el-button>
                        <el-button type="success" @click="addSerialNumDialogVisible=true;">编辑</el-button>
                        <el-button type="success" @click="importSerialNum">导入</el-button>
                        <el-button type="danger" @click="delSerialNumDialogVisible=true">删除</el-button>
                        <el-dialog v-model="addSerialNumDialogVisible" title="新增" width="30%" destroy-on-close center>
                            <el-form :model="serialnum_item" label-width="100px">
                                <el-form-item label="软件序列号">
                                    <el-input v-model="serialnum_item.name" />
                                </el-form-item>
                                <el-form-item label="版本号">
                                    <el-input v-model="serialnum_item.name" />
                                </el-form-item>
                                <el-form-item label="安装设备">
                                    <el-input v-model="serialnum_item.name" />
                                </el-form-item>
                                <el-form-item label="设备cpu标识">
                                    <el-input v-model="serialnum_item.name" />
                                </el-form-item>
                                <el-form-item label="设备硬件标识">
                                    <el-input v-model="serialnum_item.name" />
                                </el-form-item>
                                <el-form-item label="到期时间">
                                    <el-input v-model="serialnum_item.name" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="add_serialnum">确定</el-button>
                                    <el-button type="primary" @click="addSerialNumDialogVisible=false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <el-dialog v-model="delSerialNumDialogVisible" title="删除" width="30%" destroy-on-close center>
                            <el-form :model="user_item">
                                <el-form-item>
                                    <span>确认删除选中行数据？</span>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="delete_user">确定</el-button>
                                    <el-button type="primary" @click="delSerialNumDialogVisible=false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                    </el-row>
                    <el-row>
                        <el-table :data="tableData" highlight-current-row border style="width:100%">
                            <el-table-column prop="index" label="序列" />
                            <el-table-column prop="num" label="软件序列号" />
                            <el-table-column prop="version" label="版本号" />
                            <el-table-column prop="device" label="安装设备" />
                            <el-table-column prop="cpuid" label="设备CPU标识" />
                            <el-table-column prop="hdid" label="设备硬盘标识" />
                            <el-table-column prop="dateout" label="到期时间" />
                        </el-table>
                    </el-row>
            </el-card>
        </el-row>
    </el-col>
</template>

<script>
import {ref} from 'vue'
export default {
    setup(){
        let tableData=ref([
            {
                index: '1',
                num: 'XX',
                version: '1.0',
                device:'COMPUTER-202',
                cpuid:'XX',
                hdid:'XX',
                dateout:'2024'
            },
        ])
        window.cefQueryRequset('serialnum','query', {},(res,data)=>{
            if(res && data instanceof Array && data.length) {
                tableData.value = tableData.value.concat(data)
            }
        })
        return {tableData}
    },
    data(){
        return {
            addSerialNumDialogVisible:ref(false),
            delSerialNumDialogVisible:ref(false),
            serialnum_item:{
                serialnum:'',
                deviceid:'',
                range:''
            }
        }
    },
    methods:{
        add_serialnum(){
            window.cefQueryRequset('serialnum','import',this.serialnum_item)
            this.addSerialNumDialogVisible = false;
        },
        importSerialNum(){
            window.cefQueryRequset('serialnum','import')
            this.delSerialNumDialogVisible = false;
        },
    }
}
</script>

<style scoped>
.box-card{
    width: 100%;
}
</style>